"use client";
import React from "react";
import Image from "next/image";
import {
	Sheet,
	SheetContent,
	SheetTrigger,
	SheetClose,
} from "@/components/ui/sheet";
import Link from "next/link";
import { SignedOut } from "@clerk/nextjs";
import { Button } from "@/components/ui/button";
import { navLinks } from "@/constants";
import { usePathname } from "next/navigation";

function NavContent() {
	const pathname = usePathname();
	return (
		<section className="flex h-full flex-col gap-6 pt-16">
			{navLinks.map((link) => {
				const isActive =
					(pathname.includes(link.route) && link.route.length > 1) ||
					pathname === link.route;

				return (
					<SheetClose key={link.route}>
						<Link
							href={link.route}
							className={`${isActive ? "primary-gradient text-light-900 rounded-lg" : "text-dark300_light900"} flex items-center justify-start gap-4 bg-transparent p-4`}
						>
							<Image
								className={`${isActive ? "" : "invert-colors"}`}
								src={link.imageURL}
								alt={link.label}
								width={20}
								height={20}
							></Image>
							<p
								className={`${isActive ? "base-bold" : "base-medium"}`}
							>
								{link.label}
							</p>
						</Link>
					</SheetClose>
				);
			})}
		</section>
	);
}

export default function MobileNav() {
	return (
		<Sheet>
			<SheetTrigger asChild>
				<Image
					src="/assets/icons/hamburger.svg"
					width={24}
					height={24}
					alt="menu open"
					className="text-dark-200 dark:text-light-700 sm:hidden"
				></Image>
			</SheetTrigger>
			<SheetContent
				side="left"
				className="background-light900_dark200 border-none"
			>
				<Link href="/" className="flex items-center gap-1">
					<Image
						src="/assets/images/site-logo.svg"
						width={31}
						height={31}
						alt="Dev Overflow"
					></Image>
					<p className="h2-bold font-spaceGrotesk text-dark-100 dark:text-light-900">
						Dev <span className="text-primary-500">Overflow</span>
					</p>
				</Link>
				<div className="flex flex-col justify-between w-full h-full">
					<SheetClose asChild>
						<NavContent />
					</SheetClose>

					<SignedOut>
						<div className="flex flex-col gap-3 pb-9">
							{/* 登陆连接 */}

							<SheetClose asChild>
								<Link href="/sign-in">
									<Button className="small-medium btn-secondary min-h-[41px] w-full rounded-lg px-4 py-3 shadow-none">
										<span className="primary-text-gradient body-semibold">
											Sign In
										</span>
									</Button>
								</Link>
							</SheetClose>

							{/* 注册连接 */}

							<SheetClose asChild>
								<Link href="/sign-in">
									<Button className="small-medium light-border-2 btn-tertiary min-h-[41px] w-full rounded-lg px-4 py-3 shadow-none  ">
										<span className="text-dark-400 dark:text-light-900 body-semibold">
											Sign Up
										</span>
									</Button>
								</Link>
							</SheetClose>
						</div>
					</SignedOut>
				</div>
			</SheetContent>
		</Sheet>
	);
}
